<style lang="less">
.index-scale .index-scale-icon {
        transition: all .4s;
}
.index-scale:hover .index-scale-icon {
        transition: all .4s;
        transform: scale(1.2, 1.2);
}
.index-readmore {
    border: 1px solid #555;
    color: #555;
    cursor: pointer;
    &:hover {
        background-color: #2D8cF0;
        color: white;
        border: 1px solid #2D8cF0;
    }
}
.ivu-carousel-arrow {
    height: 72px;
    border-radius: 0;
    font-size: 2em;
}
.index-notice-bar {
    position:relative;
    margin-top:-40px;
    height:40px;
    line-height:40px;
    background-color:rgba(0,0,0,0.5);
    color:white;
    padding-left:20px;
}
.index-honor {
    .ivu-carousel-arrow.right {
        right: 0;
    }
    .ivu-carousel-arrow.left {
        left: 0;
    }
}
</style>


<template>
    <div>
        <Row style="width:0;margin: 0 auto;">
            <Col style="width:100vw;margin-left:-50vw;">
                <Carousel autoplay loop dots="none" :autoplay-speed="5000">
                    <CarouselItem v-for="(item, i) in index.advertisements" :key="i">
                        <a :href="item.link" target="_blank" :title=item.description>
                            <background-image long linkable style="display:block;height:40vw;max-height:500px;" :value=item.picture />
                        </a>
                    </CarouselItem>
                </Carousel>
            </Col>
        </Row>

        <div v-if="showPage&&index.notices.length" class="index-notice-bar full-background" sz1>
            <span lh3 left>通知：</span>
            <Marquee left w10 :items="index.notices"></Marquee>
            <router-link lh3 left v-if="index.notices.length>1" :to="{name:'article-list',params:{systemtype:3}}" white linkable-white pdx2>[更多]</router-link>
        </div>

        <Row :gutter="isPhone?15:60" mgt5>
            <Col :xs=12 :sm=12 :md=6 text-center>
                <router-link class="index-scale" :to="{name:'about',params:{tag:'corporateculture'}}">
                    <p mgt2>
                        <img class="index-scale-icon" src="../../images/icon-book.png" style="width:35px;height:35px;">
                    </p>
                    <p mgt2>
                        <Button class="index-scale-icon" type="text" sz3>企业文化</Button>
                    </p>
                </router-link>
                <p mgt2 gray3>经营理念 专注于产品质量提升，细心于口腔保健服务。管理理念  科学管理提升效率层层把关精益求精...</p>
            </Col>
            <Col :xs=12 :sm=12 :md=6 text-center>
                <router-link class="index-scale" :to="{name:'article-list',params:{systemtype:2}}">
                    <p mgt2>
                        <img class="index-scale-icon" src="../../images/icon-classroom.png" style="width:35px;height:35px;">
                    </p>
                    <p mgt2>
                        <Button class="index-scale-icon" type="text" sz3>微课堂</Button>
                    </p>
                </router-link>
                <p mgt2 gray3>微课堂”突破传统的课堂授课模式，将课堂搬到了手机或IPAD里。“微课”能随时随地的学习，也能随时随地与...</p>
            </Col>
            <Col :xs=12 :sm=12 :md=6 text-center>
                <router-link class="index-scale" :to="{name:'mall'}">
                    <p mgt2>
                        <img class="index-scale-icon" src="../../images/icon-market.png" style="width:35px;height:35px;">
                    </p>
                    <p mgt2>
                        <Button class="index-scale-icon" type="text" sz3>商城</Button>
                    </p>
                </router-link>
                <p mgt2 gray3>圣美达商城为消费者提供了丰富、专业、有质量保证的商品，消费者可以随时随地了解、购买商品</p>
            </Col>
            <Col :xs=12 :sm=12 :md=6 text-center>
                <router-link class="index-scale" :to="{name:'feedback'}">
                    <p mgt2>
                        <img class="index-scale-icon" src="../../images/icon-message.png" style="width:35px;height:35px;">
                    </p>
                    <p mgt2>
                        <Button class="index-scale-icon" type="text" sz3>资讯留言</Button>
                    </p>
                </router-link>
                <p mgt2 gray3>如果您对我们有什么建议、投诉、需求，可以通过留言告诉我们，我们会在第一时间了解并及时与您联系。</p>
            </Col>
        </Row>

        <Row class="full-background" mgt5 bg-gray5>
            <Col :sm=24 :md=12 class="index-scale" style="overflow:hidden;">
                <background-image class="index-scale-icon" block long :style="{height:isPhone?'40vw':'400px'}" :value=index.companyProfile.picture />
            </Col>
            <Col :sm=24 :md=12 pdx4>
                <p sz4 mgt4>公司介绍</p>
                <p mgt4 lh2>{{ellipsis(index.companyProfile.description || index.companyProfile.content, 200)}}</p>
                <p mgt5 mgb4>
                    <router-link class="index-scale index-readmore" pdy2 pdx4 :to="{name:'about',params:{tag:'companyprofile'}}">
                        <span inline-block>查看更多</span>
                    </router-link>
                </p>
            </Col>
        </Row>
        <Row>
            <Col :sm=24 :md=12 pdx4>
                <p sz4 mgt4>荣誉资质</p>
                <p mgt4 lh2>{{ellipsis(index.honor.description || index.honor.content, 200)}}</p>
                <p mgt5 mgb4>
                    <router-link class="index-scale index-readmore" pdy2 pdx4 :to="{name:'about',params:{tag:'honor'}}">
                        <span inline-block>查看更多</span>
                    </router-link>
                </p>
            </Col>
            <Col :sm=24 :md=12 class="index-scale index-honor" style="overflow:hidden;">
                <Carousel v-if="index.honor.pictures.length" autoplay loop dots="none" :autoplay-speed="5000">
                    <CarouselItem v-for="(item, i) in index.honor.pictures" :key="i">
                        <background-image block :style="{height:isPhone?'40vw':'400px'}" long :value=item />
                    </CarouselItem>
                </Carousel>
                <background-image block v-else class="index-scale-icon" :style="{height:isPhone?'40vw':'400px'}" long :value="index.honor.picture || index.honor.pictures[0]" />
            </Col>
        </Row>

        <Row class="full-background" bg-gray5 text-center>
            <Col v-if="index.commodities.length" span="24">
                <p sz4 mgt5>圣华推荐</p>
                <div style="border-bottom:3px solid #444;" w3 center mgt2>
                </div>
                <p mgt3></p>
                <commodity-marquee :items="index.commodities"></commodity-marquee>
            </Col>
            <Col v-if="false" span="24">
                <p sz4 mgt5>宣传视频</p>
                <div style="border-bottom:3px solid #444;" w3 center mgt2>
                </div>
                <p mgt3></p>
            </Col>
        </Row>

        <Row :gutter="20">
            <Col v-if="index.articles.length" span="24" text-center>
                <p sz4 mgt5>公司资讯</p>
                <div style="border-bottom:3px solid #444;" w3 center mgt2>
                </div>
                <p mgt3></p>
            </Col>
            <Col :sm="{ span: 12, offset: 0 }" :md="{ span: 6, offset: 0 }" v-for="(item, i) in index.articles" :key="i" mgb3>
                <router-link :to="{name:'article-detail',params:{id:item.id,systemtype:0}}" :title=item.title>
                    <div class="index-scale" style="overflow:hidden;" bd-gray4>
                        <background-image class="index-scale-icon"  style="display:block;padding-bottom: 60%;" long :value=item.picture />
                    </div>
                    <p sz1 gray1 linkable mgt2 ellipsis long>{{item.title}}</p>
                </router-link>
                <p gray3>{{formatTimeStr(item.creationTime, 'YYYY-MM-DD')}}</p>
                <p gray3 mgt2 h3>{{ellipsis(item.description || item.content, 50)}}</p>
            </Col>
        </Row>

    </div>
</template>

<script lang="ts">
import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import AbpBase from '../../lib/abpbase';
import BackgroundImage from '@common/components/background-image';
import Marquee from './marquee.vue';
import CommodityMarquee from './commodity-marquee.vue';


@Component({
	components: { BackgroundImage, Marquee, CommodityMarquee }
})
export default class Home extends AbpBase{
	get index() {
		return this.$store.state.websiteInfo.homeIndex;
	}
	async handleGetIndex() {
        this.showPage = false;
        await this.$store.dispatch('websiteInfo/getHomeIndex');
        this.showPage = true;
	}
	async created() {
		await this.handleGetIndex();
	}
}
</script>

